<template>
  <div class="ProgressDashboard" style="padding: 12px">
    <div>
      <a-descriptions>
        <a-descriptions-item>
          <template #label>
            <span class="descriptions-label">订单号</span>
          </template>
          <span>{{ resobj.orderNo }}</span>
        </a-descriptions-item>
        <a-descriptions-item>
          <template #label>
            <span class="descriptions-label">订单总数</span>
          </template>
          <span>{{ resobj.qtyExpectedAll }}</span>
        </a-descriptions-item>
        <a-descriptions-item>
          <template #label>
            <span class="descriptions-label">预估完成时间</span>
          </template>
          <span>{{ resobj.estEndDate }}</span>
        </a-descriptions-item>
        <a-descriptions-item>
          <template #label>
            <span class="descriptions-label">产线总人数</span>
          </template>
          <span>{{ resobj.productLinePeopleTota }}</span>
        </a-descriptions-item>
        <a-descriptions-item>
          <template #label>
            <span class="descriptions-label">当前总进度</span>
          </template>
          <span>{{ resobj.schedule }}</span>
        </a-descriptions-item>
        <a-descriptions-item>
          <template #label>
            <span class="descriptions-label">订单类型</span>
          </template>
          <span>{{ resobj.requisitionTypeStr == 1 ? '新品' : '翻单' }}</span>
        </a-descriptions-item>
        <a-descriptions-item>
          <template #label>
            <span class="descriptions-label">CP</span>
          </template>
          <span>
            {{ resobj.cp }}
          </span>
        </a-descriptions-item>
        <a-descriptions-item>
          <template #label>
            <span class="descriptions-label">SKC</span>
          </template>
          <span>
            {{ resobj.skc }}
          </span>
        </a-descriptions-item>
        <a-descriptions-item>
          <template #label>
            <span class="descriptions-label">计划完成时间</span>
          </template>
          <span>
            {{ resobj.planFinishDate }}
          </span>
        </a-descriptions-item>
      </a-descriptions>
    </div>
    <div>
      <legend-description :legend="legend" class="legend-description" />
      <div v-for="(productLine, index) in dataListState.list" :key="index">
        <h3 style="margin-block: 20px">
          {{ productLine.proLineName }}
        </h3>
        <div>
          <div v-for="product in productLine.dayobjarr">
            {{ product.month }}
            <div style="margin-bottom: 20px">
              <span>下单计划</span>
              <div class="day-table">
                <div
                  class="item-box"
                  v-for="(day, index) in product.daylist"
                  :key="index"
                >
                  <a-tooltip color="#ffffff" :overlay-style="{ zIndex: 1 }">
                    <!--                    <template #title>-->
                    <!--                      <div class="tip-content">-->
                    <!--                        <a-image-->
                    <!--                          style="margin-left: 20px"-->
                    <!--                          :preview="false"-->
                    <!--                          :width="130"-->
                    <!--                          :src="productLine.ossUrl"-->
                    <!--                        />-->
                    <!--                        <div class="data-info">-->
                    <!--                          <div style="cursor: pointer" @click="goPage">-->
                    <!--                            采购订单：{{ productLine.orderNo }}-->
                    <!--                          </div>-->
                    <!--                          <div>-->
                    <!--                            订单类型：{{-->
                    <!--                              productLine.requisitionType == 1-->
                    <!--                                ? '新品申购'-->
                    <!--                                : '翻单'-->
                    <!--                            }}-->
                    <!--                          </div>-->
                    <!--                          <div style="display: flex">-->
                    <!--                            CP：{{ productLine.cp }}-->
                    <!--                          </div>-->
                    <!--                          <div style="display: flex">-->
                    <!--                            SKF：{{ productLine.skc }}-->
                    <!--                          </div>-->
                    <!--                          <a-button-->
                    <!--                            v-if="productLine.isChaoQl"-->
                    <!--                            @click="editProduce(productLine)"-->
                    <!--                            style="background-color: rgba(239,185,185,0.3)"-->
                    <!--                            danger-->
                    <!--                            size="small"-->
                    <!--                          >超期预警</a-button-->
                    <!--                          >-->
                    <!--                        </div>-->
                    <!--                      </div>-->
                    <!--                    </template>-->

                    <div
                      class="item-content"
                      :style="{ backgroundColor: getColorsByWeek(day) }"
                    >
                      {{ index + 1 }}
                    </div>
                  </a-tooltip>
                  <div
                    v-if="(index + 1) % 1 === 0 && index < 31 - 1"
                    style="height: 30px; width: 1px; background-color: #bfbfbf"
                  />
                </div>
              </div>
            </div>

            <div>
              <!--            /-->
              <span>预估/实际</span>
              <div class="day-table">
                <div
                  class="item-box"
                  v-for="(day, index) in product.realityList"
                  :key="index"
                >
                  <a-tooltip color="#ffffff">
                    <!--                  <template #title>-->
                    <!--                    <div class="tip-content">-->
                    <!--                      <a-image-->
                    <!--                        style="margin-left: 20px"-->
                    <!--                        :preview="false"-->
                    <!--                        :width="130"-->
                    <!--                        :src="productLine.ossUrl"-->
                    <!--                      />-->
                    <!--                      <div class="data-info">-->
                    <!--                        <div style="cursor: pointer" @click="goPage">-->
                    <!--                          采购订单：{{ productLine.orderNo }}-->
                    <!--                        </div>-->
                    <!--                        <div>-->
                    <!--                          订单类型：{{-->
                    <!--                            productLine.requisitionType == 1-->
                    <!--                              ? '新品申购'-->
                    <!--                              : '翻单'-->
                    <!--                          }}-->
                    <!--                        </div>-->
                    <!--                        <div style="display: flex">-->
                    <!--                          CP：{{ productLine.cp }}-->
                    <!--                        </div>-->
                    <!--                        <div style="display: flex">-->
                    <!--                          SKF：{{ productLine.skc }}-->
                    <!--                        </div>-->
                    <!--                        <a-button-->
                    <!--                          v-if="productLine.isChaoQl"-->
                    <!--                          @click="editProduce(productLine)"-->
                    <!--                          style="background-color: rgba(239,185,185,0.3)"-->
                    <!--                          danger-->
                    <!--                          size="small"-->
                    <!--                        >超期预警</a-button-->
                    <!--                        >-->
                    <!--                      </div>-->
                    <!--                    </div>-->
                    <!--                  </template>-->
                    <div
                      class="item-content"
                      :style="{ backgroundColor: getColorsByWeek(day) }"
                    >
                      {{ index + 1 }}
                    </div>
                  </a-tooltip>

                  <div
                    v-if="(index + 1) % 1 === 0 && index < 31 - 1"
                    style="height: 30px; width: 1px; background-color: #bfbfbf"
                  />
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import moment from 'moment'
import { message } from 'ant-design-vue'
import legendDescription from './legendDescription.vue'
/**
 * 根据年月生成天数和星期
 * @param year
 * @param month
 * @returns {*[]}
 */
const getDatesAndWeekdays = (year, month) => {
  const datesAndWeekdays = []
  // 获取指定月份的天数
  const daysInMonth = moment(`${year}-${month}`, 'YYYY-MM').daysInMonth()

  // 生成日期和星期几的对象
  for (let day = 1; day <= daysInMonth; day++) {
    const date = moment(`${year}-${month}-${day}`, 'YYYY-MM-DD')
    const weekday = date.format('E')
    datesAndWeekdays.push({ day: date.format('YYYY-MM-DD'), week: weekday })
  }
  return datesAndWeekdays
}

// #d6f0ff,#f1f1f199,#e6f7e599

export default {
  components: {
    legendDescription
  },
  name: 'ShowProgressBoard',
  props: {
    orderNo: String, // 声明 props 类型
    supplierId: String
  },
  data() {
    return {
      resobj: {
        orderNo: '',
        supplierId: '',
        qtyExpectedAll: '',
        estEndDate: '',
        productLinePeopleTotal: '',
        requisitionTypeStr: '',
        schedule: '',
        cp: '',
        skc: '',
        planFinishDate: ''
      },
      dataListState: {
        list: []
      },
      legend: [
        {
          color: '#bae7ff',
          description: '已排产'
        },
        {
          color: '#e7ebed8a',
          description: '未排产'
        },
        {
          color: '#e6f7e599',
          description: '周末'
        }
      ]
    }
  },
  mounted() {
    this.$nextTick(() => {
      if (this.orderNo != undefined) {
        this.initFun()
      }
    })
  },
  methods: {
    isTimeInRange(timeToCheck, startTime, endTime) {
      const currentTime = new Date(timeToCheck)
      const rangeStart = new Date(startTime)
      const rangeEnd = new Date(endTime)

      return currentTime >= rangeStart && currentTime <= rangeEnd
    },
    getColorsByWeek(obj) {
      if (obj.week <= 5 && obj.week != 0) {
        return '#e7ebed8a'
      } else {
        if (obj.week === '6' || obj.week === '7') {
          return '#e6f7e599'
        } else {
          return '#bae7ff'
        }
      }
    },
    async initFun() {
      await this.$api.ShowProgressBoard.getDetaill({
        orderNo: this.orderNo,
        supplierId: this.supplierId
      }).then(res => {
        if (res) {
          this.resobj = res
          const data = res.list
          // 后端目前没有日期生产六个月的数
          this.dataListState.list = data.map(item => {
            var dayList = []
            var realityList = []

            const currentYear = moment().format('yyyy')

            const currentMonth = moment().format('M')

            if (item.monthList != null) {
              item.dayobjarr = []
              item.monthList.forEach(el => {
                dayList = []
                realityList = []
                var days = getDatesAndWeekdays(
                  currentYear,
                  el.month.substr(5, 2)
                )
                for (let i = 0; i < days.length; i++) {
                  const day = days[i]
                  dayList.push({
                    ...day
                  })
                  realityList.push({
                    ...day
                  })
                  if (item.monthList.length > 0) {
                    for (let j = 0; j < item.monthList.length; j++) {
                      if (item.monthList[j].planDayList != null) {
                        for (
                          let k = 0;
                          k < item.monthList[j].planDayList.length;
                          k++
                        ) {
                          const paichanday = item.monthList[j].planDayList[k]
                          dayList.forEach(item => {
                            if (paichanday == item.day) {
                              item.week = '0'
                            }
                          })
                        }
                      }

                      if (item.monthList[j].estDayList != null) {
                        for (
                          let k = 0;
                          k < item.monthList[j].estDayList.length;
                          k++
                        ) {
                          const paichanday = item.monthList[j].estDayList[k]
                          realityList.forEach(item => {
                            if (paichanday == item.day) {
                              item.week = '0'
                            }
                          })
                        }
                      }
                    }
                  }
                }

                // for (let i = 0; i < dayList.length; i++) {
                //   const day = dayList[i]
                //   // console.log(day.day);
                //   // if(){
                //   //   const currentTimeToCheck = day.day; // Replace with your desired time
                //   //   const rangeStart = "2023-08-23T10:00:00";
                //   //   const rangeEnd = "2023-08-23T18:00:00";
                //   //
                //   //   const isInRange = isTimeInRange(currentTimeToCheck, rangeStart, rangeEnd);
                //   //
                //   //   if (isInRange) {
                //   //     console.log("The time is within the range.");
                //   //   } else {
                //   //     console.log("The time is not within the range.");
                //   //   }
                //   // }
                //   realityList.push({
                //     ...day
                //   })
                // }

                var obj = {
                  month: el.month,
                  daylist: dayList,
                  realityList: realityList
                }
                item.dayobjarr.push(obj)
              })
            }

            const date = moment(`${currentYear}-${currentMonth}`, 'YYYY-MM')
            return {
              ...item,
              dayList,
              realityList,
              month: date.format('YYYY年MM月')
            }
          })
        }
      })
    },
    async saveDate() {
      const res = await this.$api.ShowProgressBoard.UpdateDate({
        orderNo: this.resobj.orderNo,
        planFinishDate: this.resobj.planFinishDate
      }).then(res => {
        if (res == null) {
          message.success({
            content: '修改成功',
            duration: 2,
            style: {
              marginTop: '20vh' // 垂直居中，可以根据需要调整
            }
          })
        } else {
          message.success({
            content: '修改失败',
            duration: 2,
            style: {
              marginTop: '20vh' // 垂直居中，可以根据需要调整
            }
          })
        }
      })
    }
  }
}
</script>

<style scoped>
.day-table {
  display: flex;
  align-items: center;
  border: #bfbfbf solid 1px;
  width: max-content;
}
.day-table .item-box {
  display: flex;
}
.day-table .item-box .item-content {
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  background-color: #d6f0ff;
}
.tip-content .data-info {
  font-size: 13px;
  margin-left: 20px;
  color: black;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: space-between;
}
.descriptions-label {
  font-weight: bold;
}
.legend-description {
  margin: 10px 0px;
}
</style>
